<template>
	<xl-category
		:data="categorys"
		:cascade="3"
		loadApi=""
		loadChildApi=""
		back
		:propNames="{
			id: 'id',
			name: 'name',
			children: 'children',
			img: 'img',
			url: 'url'
		}"
		url="tabs"
		color="#0a93ff"
		background="#f6f6f6"
		:reduceHeight="200"
		@loadChildren="loadChildren"
		@click="handleClick"
	/>
</template>

<script setup>
	import { ref, onMounted } from 'vue'
	
	// 分类数据，可将所有分类数据放置categorys，多级可用children属性
	// 若不一次性将多级数据请求，可不写children，则会触发loadChildApi向后端请求，或者不写loadChildApi，可触发loadChildren事件，父组件中请求二级分类数据
	// 甚至可以不传该数据，配置loadApi，组件中会自动请求一级分类数据
	const categorys = ref([
		{id: '1', name: '部件模板', img: '/static/imgs/pic.png'},
		{id: '2', name: '页面模板', img: '/static/imgs/pic.png'}
	])
	
	/**
	 * 实际开发中往往会使用loadChildApi直接请求，loadChildApi会用到$xl.api去请求，需要apis中配置接口，如果不想用$xl.api请求数据，可以触发该事件，自行请求数据
	 * 若传参categorys中没有children，也未配置loadChildApi，则触发loadChildren加载二级数据
	 * @param {Object} categoryId  一级分类id
	 * @param {Object} init  请求二级数据后更新方法，如init(data)
	 */
	function loadChildren(categoryId, init) {
		if(categoryId == '1') {
			init([{id: '11', name: '分类部件', children: [
				{id: '111', name: '部件', img: '/static/imgs/logo.png'},
				{id: '112', name: '模板', img: '/static/imgs/logo.png'},
				],
			}])
		}else if(categoryId == '2') {
			init([{id: '11', name: '收货地址', children: [{id: '1', name: '部件', img: '/static/imgs/logo.png'}]}])
		}
	}
	
	function handleClick(category) {
		console.log(category.id);
	}
</script>

<style lang="scss" scoped>
	
</style>